<template>
  <div>
    <h1>ref函数</h1>
    <ul>
      <li>{{ count }}</li>
      <li>
        <button @click="addFn">点击+1</button>
      </li>
      <li>{{obj.name}}</li>
      <li>
        <button @click="changeObj">点击修改</button>
      </li>
      <li>{{list}}</li>
      <li>
        <button @click="changeList">点击增加随机数</button>
      </li>
    </ul>
  </div>
</template>

<script>/**
 * 作用：ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象
 * **使用步骤**
 * 语法：const 变量名 = ref(任意类型的默认值) =》访问修改：变量名.value
1. 从vue框架中导出`ref`函数
2. 在setup函数中调用`ref`函数并传入数据（简单类型或者复杂类型）
3. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
4. **注意⚠️：**在setup函数中使用ref结果，需要通过`.value`  访问，模板中使用不需要加.value；而且可以重新=号赋值
 */
import { ref } from 'vue'
export default {
  setup () {
    // 1.简单类型
    const count = ref(0)

    // 点击+1
    const addFn = () => {
      count.value++
    }

    // 2.复杂类型
    const obj = ref({
      name: '青青'
    })

    // 数组类型
    const list = ref([1, 2, 3])

    // 点击增加随机数
    const changeList = () => {
      list.value.push(Math.random() * 100)
    }

    // 修改值
    const changeObj = () => {
      obj.value.name = '小青'
    }

    return { count, addFn, obj, changeObj, list, changeList }
  }
}
</script>

<style lang="scss" scoped>

</style>
